<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DoitCSS V2.3 演示实例</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="DoitCSS V1.0">
	<meta name="description" content="DoitCSS是根据bootstap改编的CSS框架">
	<!--基础-->
	<link href="../css/base.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--文字排版-->
	<link href="../css/typography.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表格-->
	<link href="../css/tables.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表单按钮-->
	<link href="../css/form-buttons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--架构-->
	<link href="../css/layouts.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--元件-->
	<link href="../css/elements.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--图标-->
	<link href="../css/icons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--菜单-->
	<link href="../css/navigation.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--分页-->
	<link href="../css/pagination.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--清除浮动-->
	<link href="../css/clear.css?ver=v2.3" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
	<fieldset class="mt20">
	<legend>提示信息框：</legend>
		<div class="alert-success">恭喜你，操作成功！<a href="#">查看详情</a></div>
		<div class="alert-danger">对不起，操作失败！<a href="#">查看详情</a></div>
		<div class="alert-warning">您有新邮件，请注意查收！<a href="#">查看详情</a></div>
		<div class="alert-info">我要从南走到北！<a href="#">查看详情</a></div>
	</fieldset>

	<fieldset class="mt20">
	<legend>信息提示(图标)：</legend>
		<div class="alert-success"><i class="icon icon-success"></i> 恭喜你，操作成功！<a href="#">查看详情</a><i class="alert-close alert-close-success ml30"></i></div>
		<div class="alert-danger"><i class="icon icon-error"></i> 对不起，操作失败！<a href="#">查看详情</a><i class="alert-close alert-close-danger ml30"></i></div>
		<div class="alert-warning"><i class="icon icon-warning"></i> 您有新邮件，请注意查收！<a href="#">查看详情</a><i class="alert-close alert-close-warning ml30"></i></div>
		<div class="alert-info"><i class="icon icon-info"></i> 我要从南走到北！<a href="#">查看详情</a><i class="alert-close alert-close-info ml30"></i></div>
	</fieldset>

	<fieldset class="mt20">
	<legend>背景色：</legend>
		<div class="bg-color-success mb15">绿色：天时不如地利，地利不如人和！</div>
		<div class="bg-color-danger mb15">红色：天时不如地利，地利不如人和！</div>
		<div class="bg-color-warning mb15">橙色：天时不如地利，地利不如人和！</div>
		<div class="bg-color-info mb15">蓝色：天时不如地利，地利不如人和！</div>

		<div class="bg-color-green2 mb15">绿色(2)：天时不如地利，地利不如人和！</div>
		<div class="bg-color-red2 mb15">红色(2)：天时不如地利，地利不如人和！</div>
		<div class="bg-color-orange2 mb15">橙色(2)：天时不如地利，地利不如人和！</div>
		<div class="bg-color-blue2 mb15">蓝色(2)：天时不如地利，地利不如人和！</div>
		<div class="bg-color-purple mb15">紫色：天时不如地利，地利不如人和！</div>

		<div class="bg-color-grey mb15">灰色：天时不如地利，地利不如人和！</div>
		<div class="bg-color-darkgrey mb15">深灰色：天时不如地利，地利不如人和！</div>
		<div class="bg-color-lightgrey mb15">浅灰色：天时不如地利，地利不如人和！</div>

	</fieldset>
</div>
</body>
</html>